<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>调颜色</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background: rgba(0, 0, 0,1);
    }

    input {
      width: 500px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
<div class="box"></div>
<input type="range" min="0" max="255" step="1" title="R" id="r">R <br>
<input type="range" min="0" max="255" step="1" title="G" id="g">G <br>
<input type="range" min="0" max="255" step="1" title="B" id="b">B <br>
<input type="range" min="0" max="100" step="1" title="A" id="a">a

<script>
  function $(id) {
    return document.querySelectorAll(id);
  }

  function initial() {
    [].forEach.call($('input'), i => i.addEventListener('mousemove', range_change, false));
    range_change();
  }

  function range_change() {
    var r = $('#r')[0].value;
    var g = $('#g')[0].value;
    var b = $('#b')[0].value;
    var a = $('#a')[0].value / 100;
    $('.box')[0].style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
  }

  window.addEventListener('load', initial, false);
</script>
</body>
</html>